<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>就诊人管理</span>
                <el-button type="primary" :icon="User" @click="addUser">添加就诊人</el-button>
            </div>
        </template>
        <div class="visitors" v-if="scene == 0">
            <Visitor @changeScene="changeScene" @removeUser="removeUser" class="item" v-for="(user, index) in userArr" :key="user.id"
                :user="user" :index="index" />
        </div>
        <!-- 添加就诊人或修改 -->
        <div class="form" v-if="scene == 1">
            <el-divider content-position="left"> 就诊人信息</el-divider>
            <el-form style="width: 60%; margin: 10px auto;" label-width="80">
                <el-form-item label="用户姓名" prop="">
                    <el-input placeholder="请你输入用户的姓名" v-model="userParams.name"></el-input>
                </el-form-item>
                <el-form-item label="证件类型" prop="">
                    <el-select placeholder="请你选择证件的类型" v-model="userParams.certificatesType">
                        <el-option v-for="item in certationArr" :key="item.id" :label="item.name"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=" 证件号码" prop="">
                    <el-input placeholder="请你输入证件号码" v-model="userParams.certificatesNo"></el-input>
                </el-form-item>
                <el-form-item label="用户性别" prop="">
                    <el-radio-group v-model="userParams.sex">
                        <el-radio :value="1">男</el-radio>
                        <el-radio :value="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" prop="">
                    <el-date-picker type="date" placeholder="请你选择日期" v-model="userParams.birthdate"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="手机号码" prop="">
                    <el-input placeholder="请你输入手机号码" v-model="userParams.phone"></el-input>
                </el-form-item>
            </el-form>
            <el-divider content-position="left"> 建档信息（完善后部分医院首次就诊不排队建档）</el-divider>
            <el-form style="width: 60%; margin: 10px auto;" label-width="80">
                <el-form-item label="婚姻状况" prop="">
                    <el-radio-group v-model="userParams.isMarry">
                        <el-radio :value="1">已婚</el-radio>
                        <el-radio :value="0">未婚</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="自费/医保" prop="">
                    <el-radio-group v-model="userParams.isInsure">
                        <el-radio :value="1">自费</el-radio>
                        <el-radio :value="0">医保</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="当前住址" prop="">
                    <el-cascader :props="props" v-model="userParams.addressSelected" />
                </el-form-item>
                <el-form-item label="详细地址" prop="">
                    <el-input placeholder="请你输入用户的详细地址" v-model="userParams.address"></el-input>
                </el-form-item>
            </el-form>
            <el-divider content-position="left"> 联系人信息（选填）</el-divider>
            <el-form style="width: 60%; margin: 10px auto;" label-width="80">
                <el-form-item label="用户姓名" prop="">
                    <el-input placeholder="请你输入用户的姓名" v-model="userParams.contactsName"></el-input>
                </el-form-item>
                <el-form-item label="证件类型" prop="">
                    <el-select placeholder="请你选择证件的类型" v-model="userParams.contactsCertificatesType">
                        <el-option v-for="item in certationArr" :key="item.id" :label="item.name"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=" 证件号码" prop="">
                    <el-input placeholder="请你输入证件号码" v-model="userParams.contactsCertificatesNo"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="">
                    <el-input placeholder="请你输入手机号码" v-model="userParams.contactsPhone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">提交</el-button>
                    <el-button type="primary" @click="reset">重写</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<script setup lang='ts'>
import { User } from '@element-plus/icons-vue'
import { reqGetUser } from '@/api/hospital';
import { reqCertationType, reqCity, reqAddOrUpDataUser } from '@/api/user';
import { ElMessage, type CascaderProps } from 'element-plus'
import { onMounted, reactive, ref, toRaw, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
let $router = useRouter();
let $route = useRoute();
let userArr = ref<any>([])
let scene = ref<number>(0)
let certationArr = ref<any>([])
//收集新增就诊人数据
let userParams = reactive<any>({
    name: '',
    certificatesType: '',
    certificatesNo: '',
    sex: 0,
    birthdate: '',
    phone: '',
    isMarry: 0,
    isInsure: 0,
    addressSelected: '',
    address: '',
    contactsName: '',
    contactsCertificatesType: '',
    contactsCertificatesNo: '',
    contactsPhone: ''
})
onMounted(() => {
    //获取就诊人信息
    getAllUser();
    getCertation();
    //判断是不是从挂号组件来的
    if ($route.query.type == 'add') {
        scene.value = 1
    }
    if ($route.query.type == 'edit') {
        scene.value = 1

    }
})
const getAllUser = async () => {
    let result = await reqGetUser();
    if (result.data.code === 200) {
        userArr.value = result.data.data
    }
}
const getCertation = async () => {
    let result = await reqCertationType()
    if (result.data.code === 200) {
        certationArr.value = result.data.data
    }

}
const addUser = () => {
    reset();
    scene.value = 1
}
const reset = () => {
    Object.assign(userParams, {
        id:null,
        name: '',
        certificatesType: '',
        certificatesNo: '',
        sex: 0,
        birthdate: '',
        phone: '',
        isMarry: 0,
        isInsure: 0,
        addressSelected: '',
        address: '',
        contactsName: '',
        contactsCertificatesType: '',
        contactsCertificatesNo: '',
        contactsPhone: ''
    })
}
//就诊人子组件自定义事件的回调
const changeScene = (user: any) => {
    scene.value = 1
    //收集已有的就诊人的信息
    Object.assign(userParams, toRaw(user))

}
//级联选择器数据
const props: CascaderProps = {
    lazy: true,//懒加载
    //加载级联选择器数据方法
    async lazyLoad(node, resolve) {
        let Data = toRaw(node)
        let result: any = await reqCity((Data.data?.id as string) || '86')
        //整理数据
        let showData = result.data.data.map((item: any) => {
            return {
                id: item.id,
                label: item.name,
                value: item.value,
                leaf: !item.hasChildren
            }
        })
        //注入组件需要展示的数据
        resolve(showData);

    },
}
const submit = async () => {
    try {
        //要么新增成功，要么修改成功
        await reqAddOrUpDataUser(userParams);
        ElMessage({
            type: 'success',
            message: userParams.id ? '更新成功' : '新增成功'
        })
        //判断提交的时候是不是从预约挂号来的
        if ($route.query.type) {
            $router.back();
        } else {
            scene.value = 0
        }
        getAllUser();
    } catch (error) {
        ElMessage({
            type: 'success',
            message: userParams.id ? '更新失败' : '新增失败'
        })
    }
}

watch(() => toRaw(userArr.value), () => {
    if ($route.query.type == 'edit') {
        let user = toRaw(userArr.value).find((item: any) => {
            return item.id === $route.query.id
        })
        // Object.assign(userParams, user) 
        console.log(user);
         
    }
})
//子组件自定义事件：删除按钮触发
const removeUser=()=>{
    getAllUser();
}
</script>

<style scoped lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.visitors {
    display: flex;
    flex-wrap: wrap;

    .item {
        width: 32%;
        margin: 5px;
    }
}
</style>